body {
  font-family: system-ui, arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.container {
  max-width: 100%;
  margin: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

h1 { text-align: center; }

.intro-section {
  text-align: center;
  margin: 30px 0;
}

.intro-section h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.subheading {
  font-size: 16px;
  color: #444;
  margin-bottom: 12px;
}

.features-line {
  font-size: 14px;
  color: #111;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 5px;
}

.features-line span { color: #2c7c1f; }

/* Upload area */
.upload-wrapper-box {
  background-color: #d5f7ff80;
  padding: 5px;
  border-radius: 10px;
  margin: 0 auto;
  box-sizing: border-box;
}

.drop-zone {
  width: 100%;
  min-height: 230px;
  border: 2px dashed #0078d5;
  background: transparent;
  border-radius: 0;
  padding: 1rem;
  cursor: pointer;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.drop-zone.blur-active .upload-ui,
.drop-zone.blur-active .preview-container,
.drop-zone.blur-active .upload-fab {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

.upload-ui { margin-bottom: 0; text-align: center; }

.upload-button {
  color: white;
  font-size: 26px;
  padding: 10px 28px;
  text-decoration: none;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: all .2s ease-out;
  display: block;
  background-color: #ff6411;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

.upload-button:hover {
  border-bottom: none;
  cursor: pointer;
  border-color: #dadada;
  background-color: #ff6411;
}

.upload-button:focus {
  outline: 3px dotted #ff6411;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  outline-offset: 2px;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .3);
}

.upload-button:active {
  transform: translateY(5px);
  background-color: #ff6411;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  outline: 0;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .3);
}

input[type="file"] { display: none; }

.drag-hint {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
  font-style: italic;
}

.preview-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 1rem;
  width: 100%;
}

.thumb-box {
  width: 140px;
  height: 170px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  text-align: center;
  padding: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  cursor: grab;
  user-select: none;
}

.thumb-box img,
.thumb-box canvas {
  width: 100%;
  height: 125px;
  object-fit: contain;
}

.thumb-box p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 138px;
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(117, 116, 116);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
}
.remove-btn:hover { background: #d33a2c; }
.remove-btn::before {
  content: "";
  position: absolute;
  top: -10px; left: -10px;
  width: 38px; height: 38px;
  cursor: pointer;
}

/* Sorting helpers */
.dragging { opacity: 0.5; }
#previewBox, #previewBox * { user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.thumb-box:active, .dragging { cursor: grabbing; }

.merge-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.intro-banner {
  width: 100px;
  height: auto;
  margin-bottom: -20px;
}

#mergeBtn { color: white; }
#mergeBtn:disabled {
  background-color: #aaa !important;
  cursor: not-allowed;
  opacity: 0.7;
  background-image: none;
}

/* Status / download */
.processing-card {
  display: none;
  text-align: center;
  padding: 24px;
  border: 1px solid #e5e7eb;
  margin: 22px auto 40px;
  border-radius: 12px;
  max-width: 680px;
  background: #fff;
}

/* Simple loader spinner */
.loader {
  width: 38px;
  height: 38px;
  border: 3px solid #e5e7eb;
  border-top-color: #407bff;
  border-radius: 50%;
  margin: 14px auto 8px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#downloadBtn {
  font-size: 24px;
  background-color: #41b14f;
  background-image: linear-gradient(#9ec14c, #41b14f);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
  box-shadow: 0 4px #2d8f39;
  position: relative;
  display: inline-block;
  border-radius: 11px;
  text-align: center;
  text-decoration: none;
  border: none;
  outline: 0;
  top: -2px;
  transition: top .1s ease-in-out, box-shadow .1s ease-in-out;
}
#downloadBtn:hover { background: #41b14f; }
#downloadBtn:active {
  outline: 3px dotted red;
  outline-offset: 2px;
  background: #41b14f;
  transform: translateY(5px);
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .3);
}

/* Header */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 40px;
  background-color: #ffffff;
  border-bottom: 1px solid #ddd;
  font-family: sans-serif;
  flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 18px; color: #111; }
.logo img { width: 20px; height: 20px; }

/* Footer, grids, etc. (kept from your stylesheet; can be used elsewhere) */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;padding:40px 20px;max-width:1100px;margin:50px auto 0;text-align:center}
.info-item{padding:10px 20px}
.info-item h3{font-size:18px;margin-bottom:10px;color:#222}
.info-item p{font-size:15px;color:#444;line-height:1.6}
.info-split-horizontal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:1200px;margin:30px auto 80px;padding:0 40px;gap:40px}
.info-image-left{flex:1 1 400px;text-align:center}
.info-image-left img{max-width:100%;max-height:260px;object-fit:contain}
.info-text-right{flex:1 1 600px;text-align:left}
.info-text-right h2{font-size:28px;margin-bottom:20px;color:#222}
.info-text-right p{font-size:17px;color:#444;line-height:1.8;margin-bottom:14px}

/* Footer columns */
.footer-columns{display:flex;flex-wrap:wrap;justify-content:center;gap:80px 60px;background:#ffffff;padding:60px 40px 50px;border-top:1px solid #eee}
.footer-col{min-width:180px;display:flex;flex-direction:column;gap:14px}
.footer-col h4{font-size:15px;font-weight:bold;margin-bottom:14px;color:#222}
.footer-col a{font-size:14px;color:#0077cc;text-decoration:none;transition:color 0.2s ease}
.footer-col a:hover{color:#005fa3}
.site-footer-bar{background-color:#f3f3f3;padding:50px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:14px;color:#555;margin:0}
.footer-left p{margin:0}
.footer-right{display:flex;gap:25px}
.footer-right a{color:#555;text-decoration:none;font-weight:500}
.footer-right a:hover{text-decoration:underline}

@media (max-width: 768px){
  .footer-columns{flex-direction:column;align-items:center;text-align:center;gap:40px}
  .site-footer-bar{flex-direction:column;text-align:center;gap:15px;padding:30px 20px}
  .footer-right{justify-content:center}
}

/* Extras from your sheet: tables, options, etc. */
.ascii-style-table{width:100%;border-collapse:collapse;font-family:"Courier New",Courier,monospace;font-size:15px;margin:30px auto;text-align:left}
.ascii-style-table thead tr{border-top:2px dashed #000;border-bottom:2px dashed #000}
.ascii-style-table tbody tr:last-child{border-bottom:2px dashed #000}
.ascii-style-table th,.ascii-style-table td{padding:8px 12px;border:none}
.ascii-style-table td:first-child{padding-left:18px}

.ocr-options-wrapper{display:flex;justify-content:center;margin:25px auto;padding:0 1rem}
.ocr-options-wrapper form{padding:1rem;border-radius:10px;max-width:420px;width:100%}
.ocr-options-wrapper fieldset{border:2px dashed #bbb;padding:1rem;border-radius:0px;background:white}
.ocr-options-wrapper legend{font-weight:bold;font-size:16px;padding:0 5px}
.ocr-options-wrapper .form__group{display:flex;align-items:center;margin-top:12px}
.ocr-options-wrapper input[type="checkbox"]{width:20px;height:20px;accent-color:limegreen;margin-right:10px}
.blink-outline{border:2px dashed red !important;animation:blink 1s linear infinite}
@keyframes blink{50%{opacity:0.2}}
.ocr-options-wrapper label{font-size:15px;color:#111}