.history-screen .header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0 4px 0;
}
.history-screen .header-row .title {
  font-size: 18px;
  font-weight: 700;
}
.history-screen .back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}
.history-screen .back-btn svg { width: 18px; height: 18px; }

.history-screen .filters {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 0 14px 0;
}
.history-screen .filters .pill {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-size: 13px;
}
.history-screen .filters .pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.history-screen .group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.history-screen .group .date-header {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: start;
}
/* The pinned, actionable "Awaiting payment" section sits above the dated
   history with an accent header so it reads as a call-to-action, not a day. */
.history-screen .group--awaiting { margin-bottom: 20px; }
.history-screen .date-header--accent {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
/* Each group's rows are the shared .activity-list / .activity-row from
   css/activity.css, so a transaction and a recharge invoice read identically. */

.history-screen .load-more {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}
.history-screen .load-more[disabled] { opacity: 0.5; }