@layer components {
/* ── Add tag row ────────────────────────────────────── */
.add-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.add-tag-row .tag-color-swatches { flex: none; }
.tag-manage-new-input {
  flex: 1;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 13px;
  background: var(--bg);
}
.btn-add-tag {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--t-slow);
}
.btn-add-tag:not(:disabled):hover { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn-add-tag:disabled { cursor: not-allowed; opacity: 0.6; }
}