/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .6rem 1.4rem; border-radius: 9999px;
  font-weight: 500; font-size: .875rem; cursor: pointer;
  border: none; transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-2); }

/* ── Pill badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 500;
}
.badge-accent { background: var(--accent-dim); color: var(--accent-text); }
.badge-border { border: 1px solid var(--border); color: var(--text-2); }

/* ── Search ── */
.search-wrap {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9999px; padding: .4rem .8rem;
  flex: 1; max-width: 340px;
}
.search-wrap svg { color: var(--text-3); flex-shrink: 0; }
.search-wrap input {
  background: none; border: none; outline: none;
  color: var(--text-1); font-size: .875rem; width: 100%;
}
.search-wrap input::placeholder { color: var(--text-3); }

/* ── Select (filter) ── */
.select {
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 9999px;
  padding: .45rem .75rem; font-size: .85rem; outline: none;
  font-family: inherit;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; color: var(--text-3);
  flex-wrap: wrap; margin-bottom: 1rem;
}
.breadcrumb a:hover { color: var(--accent-text); }

/* ── Pagination ── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; padding: 1.5rem 1rem; flex-wrap: wrap;
}
.pagination a, .pagination span, .pagination button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; border-radius: 9999px;
  font-size: .8rem; color: var(--text-2);
  border: 1px solid var(--border); padding: 0 .4rem;
  background: transparent; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.pagination a:hover, .pagination button:hover { background: var(--bg-3); color: var(--text-1); }
.pagination .active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.pagination .gap { border: none; cursor: default; }

/* ── Section title ── */
.section-title { font-size: 1rem; font-weight: 500; color: var(--text-1); margin-bottom: .75rem; }
.section-title.flush { margin: 0; }

/* ── Rating stars ── */
.stars { color: var(--accent-text); letter-spacing: .05em; }

/* ── Loading skeleton ── */
@keyframes sg-pulse { 0%,100% { opacity: .4; } 50% { opacity: .8; } }
.skeleton {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: .75rem; overflow: hidden; animation: sg-pulse 1.2s ease-in-out infinite;
}
.skeleton .sk-img { width: 100%; aspect-ratio: 16/9; background: var(--bg-3); }
.skeleton .sk-line { height: .65rem; margin: .55rem .6rem; border-radius: 4px; background: var(--bg-3); }
.skeleton .sk-line.short { width: 55%; }

/* ── States ── */
.state-msg { text-align: center; padding: 3rem 1rem; color: var(--text-3); }
.state-msg strong { color: var(--text-1); display: block; margin-bottom: .35rem; font-size: 1rem; }
.spinner {
  width: 1.5rem; height: 1.5rem; border: 2px solid var(--border);
  border-top-color: var(--accent-text); border-radius: 50%;
  display: inline-block; animation: sg-spin .7s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--accent);
  color: var(--text-1); padding: .6rem 1rem; border-radius: 9999px;
  font-size: .85rem; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Active filter chip ── */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent-dim); color: var(--accent-text);
  border: 1px solid var(--accent); border-radius: 9999px;
  padding: .25rem .7rem; font-size: .78rem; cursor: pointer;
}
.chip:hover { background: rgba(124,58,237,.28); }

/* ── Favorite button ── */
.fav-btn {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 9999px; padding: .4rem .55rem; cursor: pointer; color: var(--text-2);
}
.fav-btn.active { color: var(--accent-text); border-color: var(--accent); }
.fav-btn.active svg { fill: var(--accent-text); }