:root{
  --sidebar-w: 260px;
  --bg: #0b1220;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --border: #1f2a44;
}

.sidebar{
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 14px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 50;
}
@media (max-width: 1100px){ .sidebar{ display:none } }

/* décale le contenu principal si tu as un .wrap */
.wrap{ margin-left: calc(var(--sidebar-w) + 24px); }
@media (max-width: 1100px){ .wrap{ margin-left: 0 } }

.sb-actions{ display: grid; grid-template-columns: 1fr; gap: 8px }
.sb-btn{
  padding: 10px 12px; font-weight: 900; border-radius: 10px;
  color: var(--ink); background: #0b1220; border: 1px solid var(--border);
  cursor: pointer;
}
.sb-btn:hover{ filter: brightness(1.05) }
.sb-btn:active{ transform: translateY(.5px) }

.sb-spacer{ flex: 1 1 auto }

/* Carte GitHub */
.gh-card{
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
  padding: 10px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.gh-avatar-wrap{ width: 44px; height: 44px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border) }
#ghAvatar{ display:block; width: 100%; height: 100%; object-fit: cover }
.gh-name{
  display:inline-block; color: var(--ink); font-weight: 900; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gh-name:hover{ text-decoration: underline }
.gh-meta{ font-size: .85rem; color: var(--muted) }

.gh-credits{ text-align: center; font-size: .85rem; color: var(--muted) }
.gh-credits a{ color: var(--ink); font-weight: 800; text-decoration: none }
.gh-credits a:hover{ text-decoration: underline }


.sb-group{ margin-bottom: 10px }
.sb-title{ margin: 6px 2px; font-weight: 900; color: var(--muted); font-size: .85rem }

html.view-compact .card{ --card-w: 240px; --cover-h: 150px }
html.view-dense .grid{ --gap: 10px }