.vote-history {
  display: grid;
  gap: 16px;
}

.vote-history-modes {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--border-soft, #d8dee7);
  border-radius: 6px;
  overflow: hidden;
}

.vote-history-mode {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--border-soft, #d8dee7);
  background: var(--surface, #fff);
  color: var(--text-muted, #596273);
  cursor: pointer;
}

.vote-history-mode:last-child { border-right: 0; }
.vote-history-mode.is-active { background: #173f4f; color: #fff; }

.vote-history-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}

.vote-history-filters label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.vote-history-filters label[hidden] { display: none; }
.vote-history-filters label span { color: var(--text-muted, #596273); font-size: 12px; }

.vote-history-state {
  min-height: 22px;
  color: var(--text-muted, #596273);
}

.vote-history-state.is-error { color: #a33a3a; }
.vote-history-list { display: grid; gap: 10px; }

.vote-history-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft, #d8dee7);
  border-radius: 6px;
  background: var(--surface, #fff);
}

.vote-history-card__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.vote-history-card__muted { color: var(--text-muted, #596273); }
.vote-history-status { color: #0d6670; font-weight: 700; white-space: nowrap; }

.vote-history-card__grid {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px minmax(0, 1fr);
  gap: 8px 12px;
  font-size: 13px;
}

.vote-history-card__grid > span { color: var(--text-muted, #596273); }
.vote-history-card__grid > strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.vote-history-card__note { margin: 0; padding-top: 10px; border-top: 1px solid var(--border-soft, #d8dee7); overflow-wrap: anywhere; }

.vote-history-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1100px) {
  .vote-history-filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 720px) {
  .vote-history-modes { width: 100%; }
  .vote-history-mode { flex: 1; }
  .vote-history-filters { grid-template-columns: 1fr; }
  .vote-history-card__header { align-items: flex-start; }
  .vote-history-card__grid { grid-template-columns: 84px minmax(0, 1fr); }
  .vote-history-pager { justify-content: space-between; }
}