.history { margin: var(--s6) 0 var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s6); }
.history-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.history-heading .secondary { width: auto; min-width: 116px; flex-shrink: 0; }
.history-heading h2 { font-size: var(--text-xl); margin: 0; }
.history-heading p, .history-note { color: var(--muted); margin: 4px 0; font-size: var(--text-sm); }
.history-note { margin-top: var(--s3); }
#history-status { color: var(--muted); font-size: var(--text-sm); margin: 10px 0; }
#history-status[data-kind="error"], .history-error { color: var(--danger); }
.history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.history-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
  min-width: 0;
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.history-card:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.history-card-header { display: flex; justify-content: space-between; gap: 10px; }
.history-card strong { overflow-wrap: anywhere; }
.history-card p { color: var(--muted); font-size: var(--text-xs); margin: 6px 0; overflow-wrap: anywhere; }
.history-card .history-error { color: var(--danger); }
.history-badge { flex-shrink: 0; color: var(--muted); background: var(--paper); border-radius: var(--r-full); padding: 3px 10px; font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 6px; }
.history-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.history-badge.completed { color: var(--green-700); background: var(--green-100); }
.history-badge.failed { color: var(--danger); background: var(--danger-bg); }
.history-open, #history-more { margin-top: 9px; min-height: 38px; }
@media (max-width: 700px) {
  .history { padding: var(--s5); }
  .history-list { grid-template-columns: 1fr; }
  .history-heading { align-items: flex-start; }
}