/* ═══════════════════════════════════════════════════════════
   TAGS
═══════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  transition:
    background-color var(--transition-colors),
    border-color var(--transition-colors),
    color var(--transition-colors);
}

.tag:hover {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--text);
}

.tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}

.tag.interactive {
  cursor: pointer;
}

.tag.interactive:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.tag.interactive:hover::before {
  background: var(--accent);
}

.tag.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.tag.active::before {
  background: var(--accent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-cloud .tag {
  padding: 8px 12px;
  font-size: 13px;
}