/* #3: Projektliste mit Sortierung und Zaehler-Chips (offene Issues ohne Done). Farben nur ueber var() aus :root (css/app.css). */
.side-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.side-title { min-width: 0; }
.repo-sort { flex: none; }
.repo-sort select { height: 28px; max-width: 136px; padding: 0 6px; font-size: 12px; color: var(--text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 4px; cursor: pointer; }
.repo-sort select:hover { background: var(--chip-hover); }
.repo-list button { display: flex; align-items: center; gap: 8px; }
.repo-text { flex: 1 1 auto; min-width: 0; }
.repo-count { flex: none; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--count-bg); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.repo-count.zero, .repo-count.na { background: transparent; box-shadow: inset 0 0 0 1px var(--chip-border); }
.repo-count.loading { animation: count-pulse 1.2s ease-in-out infinite; }
.repo-list button.active .repo-count { background: var(--brand); color: var(--on-brand); box-shadow: none; }
@keyframes count-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .repo-count.loading { animation: none; } }