@layer views {
.history-heading > div > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.history-toolbar { grid-template-columns: minmax(240px, 1fr) auto; margin: 18px 0 14px; }
.history-filter { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f4f7f5; }
.history-filter button { min-width: 88px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: #68736d; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.history-filter button:first-child { min-width: 52px; }
.history-filter button.active { background: #fff; color: var(--green-dark); box-shadow: 0 2px 8px rgba(37, 65, 53, .08); }
.history-list { display: grid; gap: 10px; }
.history-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-width: 0; padding: 13px; border: 1px solid var(--line); border-left: 4px solid #78aa90; border-radius: 7px; background: #fff; }
.history-card.abandoned { border-left-color: #b4aaa0; }
.history-card > img { width: 112px; height: 92px; border-radius: 6px; background: #f0f3f0; object-fit: contain; }
.history-card-body { min-width: 0; }
.history-card-title, .history-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.history-card-title small, .history-card p, .history-card-meta { color: var(--muted); font-size: 12px; }
.history-card h3 { margin: 7px 0 4px; font-size: 18px; }
.history-card p { margin: 0 0 8px; }
.history-result { padding: 4px 8px; border-radius: 999px; background: #e6f3eb; color: #25684b; font-size: 11px; font-weight: 850; }
.history-result.abandoned { background: #f1efec; color: #73685e; }
.history-empty { padding: 42px 20px; border: 1px dashed #d6ddd9; border-radius: 7px; color: var(--muted); text-align: center; }

@media (max-width: 820px) {
  .history-card { grid-template-columns: 1fr; }

  .history-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .history-filter button,
  .history-filter button:first-child {
    min-width: 0;
  }

  .history-card > img {
    width: 100%;
    height: auto;
    max-height: 240px;
  }
}
}