.display-toolbar {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #091722;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.display-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.display-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #8fa6b7;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.display-tabs button:hover, .display-tabs button.active { border-color: #29465a; background: #122637; color: #fff; }
.display-tabs button > span { width: 7px; height: 7px; border-radius: 50%; background: #536b7d; }
.display-tabs button.active > span { background: var(--cyan); box-shadow: 0 0 9px rgba(0,215,255,.5); }
.display-tabs small { min-width: 18px; padding: 2px 5px; border-radius: 99px; background: #1a3040; color: #8ea6b6; text-align: center; }
.display-url { margin: 0 0 14px; padding: 0 4px; }
.empty.compact { padding: 48px 20px; border: 1px dashed #294052; border-radius: 15px; margin-top: 12px; }
@media (max-width: 680px) {
  .display-toolbar { align-items: flex-start; flex-direction: column; }
  .display-toolbar .header-actions { width: 100%; }
  .display-toolbar .button { flex: 1; }
}