:root {
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --text: #212529;
  --text-muted: #6c757d;
  --border: #e5e5e5;
  --star: #ffcc00;
  --star-empty: #ddd;
  --brand: #1976d2;
  --brand-hover: #145ea8;
}

[data-bs-theme="dark"] {
  --bg: #14181d;
  --card-bg: #1e242b;
  --text: #e8eaed;
  --text-muted: #9aa4af;
  --border: #333b44;
  --star: #ffcc00;
  --star-empty: #454c54;
  --brand: #4c9aff;
  --brand-hover: #6fadff;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color .2s ease, color .2s ease;
}

.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.theme-toggle-btn:hover {
  opacity: 0.85;
}

.theme-toggle-fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1050;
}

.pagination {
  --bs-pagination-color: var(--brand);
  --bs-pagination-hover-color: var(--brand-hover);
  --bs-pagination-active-bg: var(--brand);
  --bs-pagination-active-border-color: var(--brand);
}