body { background: #f8fafc; }
.tool-card { transition: transform .15s ease, box-shadow .15s ease; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }

#dropZone.dragover { background: #e7f1ff; border-color: #0d6efd !important; }

.thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  cursor: grab;
  background: #fff;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .thumb-actions {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: center; gap: 2px;
  background: rgba(0,0,0,.55);
  padding: 2px 0;
}
.thumb .thumb-actions button {
  border: none; background: transparent; color: #fff; font-size: .75rem; padding: 2px 4px;
}
.thumb.dragging { opacity: .4; }

/* --- Print sheet (screen preview) --- */
.print-page {
  background: #fff;
  box-shadow: 0 0 0 1px #dee2e6, 0 4px 10px rgba(0,0,0,.06);
  margin: 0 auto 16px auto;
}
.print-grid {
  display: grid;
  justify-content: start;
  align-content: start;
}
.print-grid .cell {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.print-grid .cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.flow-grid { display: grid; align-content: start; }
.flow-grid .cell img { width: 100%; height: auto; object-fit: contain; display: block; }

/* --- Print output --- */
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { position: absolute; left: 0; top: 0; width: 100%; max-height: none !important; overflow: visible !important; border: none !important; padding: 0 !important; }
  .print-page {
    box-shadow: none !important;
    margin: 0 !important;
    page-break-after: always;
  }
  .print-page:last-child { page-break-after: auto; }
}