canvas {  border:1px solid #ccc;   max-width:100%;   }   #status {   margin-top:15px;   color:#2059ba;   margin-bottom:20px;   font-weight:600;   text-align:center; }   .PDFPreview {  flex:1;  max-height:90vh;  overflow-y:auto;   }   .hidden {  display:none;   }   div#page1 {   width:100%;   max-width:550px;   text-align:center;   padding:25px;   box-shadow:0 0 15px 0px #0002;   border-radius:10px;   margin:10px auto 30px; } .file-input {   color:#0e65bf;   cursor:pointer;   border-radius:10px;   text-transform:uppercase;   font-weight:500;   letter-spacing:3px;   font-family:system-ui;   font-size:24px;   min-height:225px;   display:flex;   align-items:center;   justify-content:center;   width:100%;   border:2px dashed;   margin:auto; } input#imageInput {   display:none; }  .image-container {   width:100%;   height:auto;   position:relative;   padding:25px;   max-width:calc(25% - 15px);   border-radius:5px;   background-color:#fff;   box-shadow:0 0 10px rgba(0, 0, 0, 0.1);   cursor:grab;   user-select:none;   transition:transform 0.2s;   border:2px solid #1736c5; } #PDFPreview {   display:flex;   flex-wrap:wrap;   gap:20px;   margin-bottom:20px;   border:1px solid #ccc5;   padding:35px;   background:#0001;   border-radius:5px;   max-height:570px;   overflow:auto;   position:relative; } .blue-btn:hover {   transform:scale(0.9); } p.convertStatus {   color:green;   font-weight:700; } .page3Inner {   display:flex;   flex-direction:column;   align-items:center; }  @media(min-width:768px) and (max-width:1024px){ .image-container {   max-width:calc(33% - 12px) !important;  } } @media(max-width:767px){ .image-container {   max-width:calc(51% - 15px) !important;  } } @media(max-width:550px){ #PDFPreview {   padding:25px; } } @media(min-width:768px) and (max-width:991px){ .image-container {   padding:15px !important;  }   #PDFPreview {   padding:25px; } }  div#page2 {   margin-bottom:20px; }   .file-input.drop-zone {   display:block;   padding:40px;   border:2px dashed #aaa;   border-radius:10px;   text-align:center;   color:#444;   cursor:pointer;   transition:background-color 0.2s ease-in-out;   position:relative; } .file-input.drop-zone.drag-over {   background-color:#eef;   border-color:#007bff;   color:#007bff; } .drag-drop-hint {   font-size:0.9em;   color:#666;   margin-top:8px;   display:inline-block; } .pdf-grid {  display:grid;  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));  gap:20px;  margin:20px 0;   }   .pdf-item {  border:1px solid #ddd;  border-radius:8px;  padding:15px;  background:white;  box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);  position:relative;   }   .pdf-preview {  width:100%;  height:150px;  border:1px solid #eee;  border-radius:5px;  display:flex;  align-items:center;  justify-content:center;  background:#f8f9fa;  margin-bottom:10px;   }   .pdf-preview canvas {  max-width:100%;  max-height:100%;  border-radius:5px;   }   .pdf-name {  font-weight:bold;  margin-bottom:5px;  word-break:break-all;   }   .pdf-pages {  color:#6c757d;  font-size:12px;   }   .remove-btn {  position:absolute;  top:5px;  right:5px;  background:#dc3545;  color:white;  border:none;  border-radius:50%;  width:25px;  height:25px;  cursor:pointer;  font-size:14px;  display:flex;  align-items:center;  justify-content:center;  transition:background-color 0.3s ease;   }   .remove-btn:hover {  background:#c82333;   }   .convertButton {  text-align:center;  margin:30px 0;   }   .add-more-section {  margin:20px 0;  padding:20px;  border:2px dashed #007bff;  border-radius:8px;  text-align:center;  transition:all 0.3s ease;   }   .add-more-btn {  background-color:#28a745;  color:white;  border:none;  padding:10px 20px;  border-radius:5px;  cursor:pointer;  font-size:14px;  transition:background-color 0.3s ease;   }   .add-more-btn:hover {  background-color:#218838;   }   .resetbutton {  text-align:center;  margin:30px 0;   }   @media (min-width:768px) {   .controlls {  display:flex;  justify-content:space-evenly;   } } label.add-more-btn {  margin-right:200px;   }   .spinner {   display:inline-block;   width:20px;   height:20px;   border:3px solid rgba(0, 0, 0, 0.1);   border-left-color:#000;   border-radius:50%;   animation:spin 0.8s linear infinite;   vertical-align:middle;   margin-right:8px;  }  @keyframes spin {   to { transform:rotate(360deg);   }  }   .loading-spinner { display:inline-block; width:14px; height:14px; border:2px solid #ccc; border-top:2px solid #333; border-radius:50%; animation:spin 0.6s linear infinite; margin-right:8px; vertical-align:middle; } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }