body{color:#333;background-color:#f0f2f5;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px;font-family:sans-serif;display:flex}.container{background-color:#fff;border-radius:8px;width:100%;max-width:600px;padding:30px;box-shadow:0 4px 8px #0000001a}header{text-align:center;margin-bottom:20px}h1{color:#1877f2;margin-bottom:10px}.conversion-modes{justify-content:center;margin-bottom:20px;display:flex}.conversion-modes button{cursor:pointer;color:#606770;background-color:#e4e6eb;border:none;border-radius:20px;margin:0 10px;padding:10px 20px;font-weight:700}.conversion-modes button.active{color:#fff;background-color:#1877f2}.upload-area{margin-bottom:20px}#file-label{text-align:center;cursor:pointer;border:2px dashed #ccd0d5;border-radius:8px;padding:40px;display:block}#file-label.dragging{background-color:#f0f2f5;border-color:#1877f2}#file-input{display:none}#preview-area{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-bottom:20px;display:grid}.preview-item{position:relative}.preview-item img{border-radius:4px;width:100%;height:auto}.button-group{justify-content:space-between;display:flex}button{cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-size:16px}#convert-btn{color:#fff;background-color:#42b72a}#clear-btn{color:#606770;background-color:#f0f2f5}footer{text-align:center;color:#606770;margin-top:20px;font-size:12px}