/* ===== Accent bar (two rows: capitals above lowercase) ===== */
.accent-bar{
  display:flex;
  flex-direction:column;      /* stack rows vertically */
  gap:.25rem;                 /* spacing between rows */
  padding:.25rem .35rem;
  border:1px solid var(--border, #e5e7eb);
  border-radius:.6rem;
  background: var(--bg-subtle, #fafafa);
}
.accent-row{
  display:flex;
  gap:.25rem;                 /* spacing between buttons */
  align-items:center;
  overflow-x:auto;            /* scrolls if screen is very narrow */
  white-space:nowrap;
}
.accent-row::-webkit-scrollbar{ height:6px }
.accent-row::-webkit-scrollbar-thumb{ background: var(--border, #e5e7eb); border-radius:6px }
.accent-sep{
  display:inline-block;
  width:1px;
  height:1rem;
  background: var(--border, #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 var(--border, #e5e7eb);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #111827);
  border-radius:.45rem;
  box-shadow: var(--shadow-sm, 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: var(--bg-hover, #f3f4f6); }
.accent-btn:active{ transform: translateY(1px); }
.accent-btn:focus{ outline:2px solid var(--primary-light, #c7d2fe); outline-offset:2px; }

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