#history {

  padding: 26px 0 34px;

}



#historyGrid,

.history-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 18px;

  width: 100%;

}



.history-card {

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border: 1px solid #e3e5ed;

  border-radius: 14px;

  background: #fff;

  box-shadow: 0 4px 16px rgba(20,22,35,.05);

}



.history-card-preview {

  display: grid;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  place-items: center;

  background: #f7f7fb;

}



.history-card-image {

  width: 100%;

  height: 100%;

  object-fit: contain;

  background: #fff;

}



.history-card-body {

  display: flex;

  flex: 1;

  flex-direction: column;

  gap: 10px;

  padding: 14px;

}



.history-card-title {

  overflow: hidden;

  font-size: 13px;

  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.history-card-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.history-meta-pill,

.history-status-badge {

  display: inline-flex;

  align-items: center;

  padding: 3px 7px;

  border-radius: 999px;

  background: #f0f1f6;

  color: #676a77;

  font-size: 10px;

  font-weight: 700;

  text-transform: capitalize;

}



.history-status-completed {

  background: #eaf8ef;

  color: #187951;

}



.history-status-failed {

  background: #fff0f1;

  color: #b42a3c;

}



.history-status-processing,

.history-status-queued,

.history-status-pending {

  background: #fff7e8;

  color: #9a6500;

}



.history-card-date {

  color: #9295a1;

  font-size: 10px;

}



.history-card-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: auto;

}



.history-action-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 30px;

  padding: 6px 9px;

  border: 1px solid #dedfe8;

  border-radius: 7px;

  background: #fafafe;

  color: #474956;

  font-size: 10px;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

}



.history-action-primary {

  border-color: #6d5dfc;

  background: #6d5dfc;

  color: #fff;

}



.history-action-warning {

  border-color: #edc37a;

  background: #fff9ec;

  color: #956000;

}



.history-empty {

  grid-column: 1 / -1;

  padding: 50px 20px;

  border: 1px dashed #d9dae3;

  border-radius: 12px;

  color: #7b7e8b;

  text-align: center;

}



@media (max-width: 900px) {

  #historyGrid,

  .history-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 580px) {

  #historyGrid,

  .history-grid {

    grid-template-columns: 1fr;

  }

}