body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f7f7f7;color:#333;}
.container{width:100%;max-width:1140px;margin:auto;padding:0 15px;}

/* HERO */
.hero{text-align:center;padding:50px 0 30px;}
.hero-title{font-size:36px;margin-bottom:10px;font-weight:600;}
.hero-desc{max-width:700px;margin:auto;font-size:16px;line-height:1.7;color:#555;}
.hero-desc a{color:#e53935;font-weight:600;text-decoration:none;}
.hero-desc a:hover{text-decoration:underline;}

/* TOOL BOX */
.tool-box{background:#fff;padding:40px;border-radius:10px;border:1px solid #ddd;text-align:center;max-width:1200px;margin:auto;box-shadow:0 4px 30px rgba(0,0,0,0.08);}

.upload-box{border:2px dashed #cfd6e4;padding:25px;border-radius:10px;background:#fafafa;cursor:pointer;margin:15px 0;transition:.3s;}
.upload-box:hover{background:#f3f6fb;border-color:#e53935;}

.upload-type-img{width:80px;margin-bottom:10px;}
.upload-text{font-size:15px;color:#555;margin-bottom:10px;}

/* BUTTON */
.btn{display:inline-block;padding:10px 22px;border-radius:6px;border:none;cursor:pointer;font-size:14px;background:#e53935;color:#fff;}
.btn:hover{background:#c62828;}
.btn-success{background:#28a745;}
.btn-success:hover{background:#218838;}
.btn-danger{background:#dc3545;}
.btn-danger:hover{background:#c82333;}
.select-btn{padding:8px 20px;}
.convert-btn{margin-top:25px;}

/* OPTIONS */
.tool-options{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:20px;}
.select-group{display:flex;flex-direction:column;min-width:160px;}
.select-group label{font-size:14px;font-weight:600;margin-bottom:6px;}
.tool-select{padding:10px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;}
.tool-select:hover{border-color:#e53935;}

/* PREVIEW */
.preview-area{display:flex;flex-wrap:wrap;gap:15px;justify-content:flex-start;margin-top:20px;}

.preview-box{
position:relative;
width:200px;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
padding:8px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.img-wrap{
width:100%;
height:260px;
display:flex;
align-items:center;
justify-content:center;
background:#f9f9f9;
border-radius:6px;
position:relative;
overflow:hidden;
}

.preview-img{
max-width:100%;
max-height:100%;
object-fit:contain;
}

/* ACTION BUTTONS */
.top-actions{
position:absolute;
top:6px;
left:6px;
right:6px;
display:flex;
justify-content:space-between;
}

.top-actions button{
background:#000;
color:#fff;
border:none;
padding:4px 6px;
font-size:12px;
border-radius:4px;
cursor:pointer;
}

.bottom-actions{
position:absolute;
bottom:6px;
left:6px;
right:6px;
}

.bottom-actions button{
width:100%;
background:#e53935;
color:#fff;
border:none;
padding:6px;
font-size:12px;
border-radius:4px;
cursor:pointer;
}

/* CLEAR */
.clear-btn{background:#dc3545;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;}
.clear-btn:hover{background:#000;}
.trash-icon::before{content:"🗑 ";}

/* FEATURES */
.features{background:#f9f9f9;padding:40px 0;}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.feature-box{background:#fff;padding:20px;border-radius:8px;border:1px solid #ddd;text-align:center;transition:.3s;}
.feature-box:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.1);}

/* INFO + FAQ */
.info-section,.faq-section{padding:40px 0;text-align:center;}
.info-section p{line-height:1.7;color:#555;}

/* HOW */
.how-section{padding:60px 0;background:#f9fbff;text-align:center;}
.how-section h2{font-size:30px;margin-bottom:35px;font-weight:700;}
.step{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
background:#fff;
border-radius:12px;
padding:18px;
border:1px solid #e3e8f0;
margin-bottom:15px;
}
.step-num{
width:40px;
height:40px;
background:#e53935;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}
.step-content p{margin:0;color:#555;}

/* LOADER */
#fakeLoadingOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;color:#fff;}
.spinner{width:50px;height:50px;border:5px solid #fff;border-top:5px solid transparent;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{100%{transform:rotate(360deg);}}

/* MOBILE */
@media(max-width:768px){
.hero-title{font-size:28px;}
.preview-box{width:48%;}
.img-wrap{height:200px;}
}