/* =============================================
   FILTER TOOLBAR — light
   ============================================= */
.answers-toolbar { margin-bottom: 22px; }
.toolbar-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.toolbar-group { display: flex; gap: 8px; flex-wrap: wrap; }

.toolbar-select {
  background: var(--white); color: var(--ink);
  border: 0.5px solid var(--ink-08); border-radius: var(--radius-pill);
  padding: 8px 30px 8px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%230A0A14' fill-opacity='0.5'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color var(--t-fast);
}
.toolbar-select:focus { outline: none; border-color: var(--ink-20); }
.toolbar-select option { background: var(--white); color: var(--ink); }

.toolbar-search { flex: 1; min-width: 180px; max-width: 340px; }
.toolbar-search input {
  width: 100%;
  background: var(--white);
  border: 0.5px solid var(--ink-08); border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  color: var(--ink); caret-color: var(--red);
}
.toolbar-search input:focus { outline: none; border-color: var(--red-30); }
.toolbar-search input::placeholder { color: var(--ink-40); }

/* Active filter chip variant */
.toolbar-select.active,
.toolbar-select[aria-pressed="true"] {
  background: var(--red-08); border-color: var(--red);
  color: var(--red);
}

/* =============================================
   PAGINATION — light
   ============================================= */
.pagination { padding: 28px 0 8px; }
.pagination-inner {
  display: flex; justify-content: center; align-items: center;
  gap: 4px; flex-wrap: wrap;
}
.pg-num {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--ink);
  border: 0.5px solid var(--ink-08);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  font-variant-numeric: tabular-nums;
}
.pg-num:hover { border-color: var(--ink-20); }
.pg-num.pg-active {
  background: var(--red); color: var(--white);
  border-color: var(--red); font-weight: 700;
  cursor: default;
}
.pg-arrow {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-50);
  border: 0.5px solid var(--ink-08); border-radius: var(--radius-sm);
  font-size: 16px; cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}
.pg-arrow:hover { color: var(--ink); border-color: var(--ink-20); }
.pg-arrow.pg-disabled { opacity: 0.22; cursor: default; pointer-events: none; }

.pg-dots {
  width: 26px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 14px; color: var(--ink-50);
}

/* Loading */
.loading-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--ink-08); border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 8px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }