#imgBase64 .main{
  display:flex;
  flex-wrap:wrap;
  gap:0;
}
#imgBase64 .left{
  flex:0 0 70%;
  padding:24px;
  box-sizing:border-box;
}
#imgBase64 .right{
    flex: 0 0 30%;
    text-align: center;
}
@media (max-width:768px){
  #imgBase64 .left {flex:0 0 100%;border:none}
  #imgBase64 .right{flex:none;border:none;width:100%}
}
#resultInfo {
    
}
#resultInfo {
    background-color: #fff;
}
#imgBase64 .custom-file{
  position:relative;
  display:inline-block;
  width:100%;
  margin-top:8px;
}
#imgBase64 .custom-file input[type=file]{
  position:absolute;
  left:0;top:0;
  opacity:0;
  width:100%;height:100%;
  cursor:pointer;
}
#imgBase64 .custom-file-label{
  background:#eef3f9;
  border:2px dashed #c5d1e0;
  border-radius:10px;
  padding:14px;
  text-align:center;
  transition:0.3s;
  color:#555;
  font-weight:600;
}
#imgBase64 .custom-file:hover .custom-file-label{
  background:#e4ebf5;
  border-color:#a0b3cc;
}
#imgBase64 .options{margin-top:15px}
#imgBase64 .slider-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}
#imgBase64 input[type=range]{width:100%;accent-color:var(--primary)}
#imgBase64 .button-row{margin-top:15px;display:flex;gap:8px;flex-wrap:wrap}
#imgBase64 button{
  background:#0342af;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  cursor:pointer;
  font-weight:600;
  transition:0.3s;
}
#imgBase64 button:hover{background:#084ec5}
#imgBase64 button:disabled{opacity:0.6;cursor:not-allowed}
#imgBase64 textarea{
  width:100%;
  height:160px;
  margin-top:15px;
  font-family:monospace;
  font-size:13px;
  padding:10px;
  border:1px solid #ccd4e0;
  border-radius:8px;
  resize:vertical;
}
#imgBase64 .info{
  margin-top:12px;
  background:#f1f5fb;
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  color:#333;
}
#imgBase64 #preview{
  max-width:100%;
  max-height:400px;
  border-radius:10px;
  object-fit:contain;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
#imgBase64 .small{font-size:13px;color:#666}