/* ===== Accent bar (compact, one row) ===== */
.accent-bar{
  display:flex;
  gap:.25rem;                 /* tighter spacing */
  align-items:center;
  overflow-x:auto;            /* scrolls if screen is very narrow */
  white-space:nowrap;
  padding:.25rem .35rem;
  border:1px solid var(--border, #e5e7eb);
  border-radius:.6rem;
  background:#fafafa;
}
.accent-bar::-webkit-scrollbar{ height:6px }
.accent-bar::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:6px }
.accent-sep{
  display:inline-block;
  width:1px;
  height:1rem;
  background:#e5e7eb;
  margin:0 .25rem;
}
.accent-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.6rem;           /* smaller chip */
  height:1.8rem;              /* smaller chip */
  padding:0 .35rem;
  font-size:.9rem;            /* slightly smaller text */
  line-height:1;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  border-radius:.45rem;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition: background-color .12s ease, transform .02s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.accent-btn:hover{ background:#f3f4f6 }
.accent-btn:active{ transform: translateY(1px) }
.accent-btn:focus{ outline:2px solid #c7d2fe; outline-offset:2px }

/* ===== Universal Loading Spinner Animation ===== */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}